<template>
  <div class="wrapp">
    <div class="head">
      <div class="title">补贴列表</div>
      <Button @click="showBunosPage" type="primary">新增补贴</Button>
    </div>
    <div class="banner">
      <div class="search">
        <Input v-model="searchData.keyWord" type="text" placeholder="ID/矿机钱包地址/矿机编号" style="width:200px;" />
        <span style="margin-left:30px;font-size:18px;line-height:16px;vertical-align: -3px;">所属项目：</span>
        <Select v-model="searchData.projectId" filterable remote :remote-method="projectSearch" :loading="ownerLoading" style="width:400px;">
          <Option v-for="(option, index) in ownerList" :value="option.id" :key="index">{{option.projectName}}</Option>
        </Select>
        <span style="margin-left:30px;font-size:18px;line-height:16px;vertical-align: -3px;">状态：</span>
        <Select v-model="searchData.subsidyStatus" style="width:200px;margin-left:5px;" @on-change="selectStatusFun">
          <Option :value="item.value" :label="item.label" v-for="(item,index) in searchData.selectStatusList" :key="index"></Option>
        </Select>
        <Button type="primary" style="margin-left:20px;" @click="searchAction">确定</Button>
      </div>
      <div class="totol">
        <span>最大补贴总额：{{totalData.totalSettingAmount}}<span style="margin-left:5px">Fil</span> </span>
        <span style="margin-left:20px">实际补贴总额：{{totalData.totalSubsidyAmount}}<span style="margin-left:5px">Fil</span> </span>
        <span style="margin-left:20px">当前剩余补贴总额：{{totalData.totalSurplusAmount}}<span style="margin-left:5px">Fil</span> </span>
      </div>
      <div class="table">
        <Table :columns="columnsData" :data="bonusInfoData" :border="true" :loading="isTableShow">
          <template slot-scope="{ row, index }" slot="set">
            <Button disabled v-if="row.subsidyStatus==='03'">已终止</Button>
            <Button @click="stopSureBonus(row,index)" v-else>提前终止</Button>
          </template>
        </Table>
        <Page :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total placement="top" @on-change="handlePage" style="margin-top:20px;"></Page>
      </div>
    </div>
    <!-- 新增补贴 -->
    <Modal v-model="setBonusShow" :mask-closable="false" width="1076" :closable="false" title="补贴设置" @on-ok="cofigInfo">
      <div class="type">
        <RadioGroup v-model="operateType">
          <Radio label="按钱包"></Radio>
          <Radio label="按项目" style="font-size:10px;"></Radio>
          <Radio label="所有" style="font-size:10px;"></Radio>
        </RadioGroup>
      </div>
      <div class="setBonusContent">
        <Form label-position="left" :label-width="180">
          <FormItem label="矿机钱包地址：" :required="true" v-if="operateType==='按钱包'">
            <Input style="width:200px;" v-model="subBonus.miningAddress" size="small" />
          </FormItem>
          <FormItem label="选择项目：" :required="true" v-if="operateType==='按项目'">
            <Select v-model="subBonus.id" filterable remote :remote-method="projectSearch" :loading="ownerLoading" style="width:400px;" size="small" @on-change="showWalletNum">
              <Option v-for="(option, index) in ownerList" :value="option.id+'/'+option.projectName+'/'+option.projectType" :key="index">{{option.projectName}}</Option>
            </Select>
            <span style="margin-left:20px" v-if="walletNum">该项目有{{walletNum}}个钱包地址</span>
          </FormItem>
          <FormItem label="当前有200个钱包地址" :required="true" v-if="operateType==='所有'">
          </FormItem>
          <FormItem label="每个钱包地址最大补贴数：" :required="true">
            <Input style="width:200px;" v-model="subBonus.maxSubsidyAmount" size="small" />
          </FormItem>
          <FormItem label="起始区块高度：" :required="true">
            <Input style="width:400px" v-model="subBonus.beginBlockHeight" size="small"></Input>
            <span style="margin-left:20px">当前区块高度为{{currentHeight}}</span>
          </FormItem>
          <FormItem label="结束区块高度：" :required="true">
            <Input style="width:400px" v-model="subBonus.endBlockHeight" size="small"></Input>
          </FormItem>
          <FormItem label="备注：" :required="true">
            <Input style="width:400px" v-model="subBonus.remark" size="small"></Input>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <!-- 确认设置的补贴 -->
    <Modal v-model="sureShow" :mask-closable="false" width="500" :closable="false" title="确认信息" @on-ok="sureBonus">
      <div v-if="operateType==='按钱包'">矿机钱包地址：{{subBonus.miningAddress}}</div>
      <div v-if="operateType==='按项目'">项目：{{projectName}}</div>
      <div>起始区块高度：{{subBonus.beginBlockHeight}}</div>
      <div>结束区块高度：{{subBonus.endBlockHeight}}</div>
      <div>每个钱包地址最大补贴数：{{subBonus.maxSubsidyAmount}}</div>

      <div>备注：{{subBonus.remark}}</div>
    </Modal>
    <!-- 提前终止确认信息 -->
    <Modal v-model="controlShow.stopShow" :mask-closable="false" width="500" :closable="false" title="确认信息" @on-ok="stopBonus">
      <div>ID：{{stopBonusData.id}}</div>
      <div>矿机编号：{{stopBonusData.minerNo}}</div>
      <div>所属项目：{{stopBonusData.projectName}}</div>
      <div>最大补贴数：{{stopBonusData.maxSubsidyAmount}}</div>
      <div>备注：{{stopBonusData.remark}}</div>
    </Modal>
  </div>
</template>

<script>
import apis from "../../util/apis.js";
import qs from "qs";

export default {
  name: "Bonus",
  data() {
    return {
      ///////////////////搜索所需数据////////
      searchData: {
        keyWord: null,
        subsidyStatus: null,
        projectId: null,
        selectStatusList: [
          {
            value: "01",
            label: "正在发放"
          },
          {
            value: "02",
            label: "发放完成"
          },
          {
            value: "03",
            label: "已终止"
          },
          {
            value: "04",
            label: "未开始"
          },
          {
            value: "99",
            label: "全部"
          },
        ],
      },
      ownerLoading: false,
      ownerList: [],
      ///////////////总额数据///////////////
      totalData: {
        totalSettingAmount: "",
        totalSubsidyAmount: "",
        totalSurplusAmount: ""
      },
      ///////////////表格数据////////////////
      columnsData: [
        {
          title: "ID",
          key: "id"
        },
        {
          title: "时间",
          key: "createdDate"
        },
        {
          title: "矿机钱包地址",
          key: "miningAddress"
        },
        {
          title: "矿机编号",
          key: "minerNo"
        },
        {
          title: "所属项目",
          key: "projectName"
        },
        {
          title: "最大补贴数（FIL）",
          key: "maxSubsidyAmount"
        },
        {
          title: "起始区块高度",
          key: "beginBlockHeight"
        },
        {
          title: "结束区块高度",
          key: "endBlockHeight"
        },
        {
          title: "当前实际补贴数（FIL）",
          key: "subsidyAmount"
        },
        {
          title: "状态",
          key: "subsidyStatusName"
        },
        {
          title: "备注",
          key: "remark"
        },
        {
          title: "设置",
          key: "set",
          slot: "set"
        },
      ],
      bonusInfoData: [],
      isTableShow: false,
      pageTotal: 0,
      pageNum: 1,
      pageSize: 5,
      stopBonusData: {},

      ////////////////补贴页面//////////////
      setBonusShow: false,
      sureShow: false,
      operateType: "按项目",
      projectName: null,
      projectType: null,
      subBonus: {
        miningAddress: null,
        beginBlockHeight: null,
        endBlockHeight: null,
        maxSubsidyAmount: null,
        id: null,
        remark: null
      },
      currentHeight: null,
      walletNum: null,
      //////////////控制显示隐藏////////////
      controlShow: {
        stopShow: false,
      }
    };
  },
  methods: {

    /////////////////////////////////////////搜索方法集合////////////////////
    //////////项目ID下拉框///////
    selectProjectTypeFun() { },
    //////////状态下拉框////////
    selectStatusFun() { },
    //////////确定搜索方法//////////
    searchAction() {
      this.getTableList(0);
    },
    /////////搜索数据的整合方法/////
    paramData(pageNum) {
      let temp = {}
      if (this.searchData.keyWord) {
        temp.keyWord = this.searchData.keyWord;
      }
      if (this.searchData.projectId) {
        temp.projectId = this.searchData.projectId;
      }
      if (this.searchData.subsidyStatus) {
        temp.subsidyStatus = this.searchData.subsidyStatus;
      }
      temp.size = this.pageSize;
      temp.page = pageNum;
      return temp;
    },
    /////////操作列表/////
    option(type) {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      let url = apis.optionAPi + "/" + type;
      this.$axios({
        method: "get",
        url: url,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        }
      })
        .then(res => {
          if (res.status == "200") {
            console.log(res.data);
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          console.log(err)
          this.$Message.error(err.response.data.message);
        });
    },
    /////////////////////////////////////////表格方法集合///////////////////
    //////////换页////////////
    handlePage(pageNum) {
      this.pageNum = pageNum;
      this.getTableList(pageNum - 1)
    },
    //////////确认停止补贴信息///
    stopSureBonus(row, index) {
      this.controlShow.stopShow = true;
      this.stopBonusData = row;
      this.stopBonusData.index = index;
    },
    //////////停止补贴///////
    stopBonus() {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      let url = apis.stopBonusApi + "/" + this.stopBonusData.id;
      this.$axios({
        method: "post",
        url: url,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        }
      })
        .then(res => {
          if (res.status == "200") {
            // this.bonusInfoData[this.stopBonusData.index].subsidyStatus = '03';
            console.log(this.pageNum);
            this.getTableList(this.pageNum - 1);
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          console.log(err)
          this.$Message.error(err.response.data.message);
        });
    },
    /////////////////////////////////////////数据的获取////////////////////
    /////////获取表格数据////////////
    getTableList(pageNum, type) {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      this.isTableShow = true;
      let url = apis.bonusListApi;
      let param = {};
      if (type === 99) {
        param.pageNum = 0;
        param.size = 5;
      } else {
        param = this.paramData(pageNum);
        console.log(param)
      }

      this.$axios({
        method: "post",
        url: url,
        data: param,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        }
      })
        .then(res => {
          if (res.status == "200") {
            this.bonusInfoData = res.data;
            this.pageTotal = parseInt(res.headers["x-total-count"]);
            this.isTableShow = false;
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    ////////获取总额数据///////////
    getTotalData() {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      let url = apis.bonusTotalApi;
      this.$axios({
        method: "post",
        url: url,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        }
      })
        .then(res => {
          if (res.status == "200") {
            this.totalData.totalSettingAmount = res.data.totalSettingAmount;
            this.totalData.totalSubsidyAmount = res.data.totalSubsidyAmount;
            this.totalData.totalSurplusAmount = res.data.totalSurplusAmount;
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          console.log(err)
          this.$Message.error(err.response.data.message);
        });
    },
    ///////获取项目列表//////////
    projectSearch(keyword) {
      if (keyword !== "") {
        this.ownerLoading = true;
        let token = this.$localStorage.storageGet("TOKEN");
        if (!token) {
          this.$router.push({
            name: "Login"
          });
          return;
        }
        this.$axios({
          method: "get",
          url: apis.downProjectApi,
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + token
          },
          data: qs.stringify({ keyword: keyword })
        })
          .then(res => {
            this.ownerList = res.data;
            this.ownerLoading = false;
          })
          .catch(err => {
            this.$Message.error(err.response.data.message);
          });
      } else {
        this.ownerList = [];
      }
    },
    ////////////////////////////////////////补贴设置的方法集合/////////////
    ////////补贴页面显示////////
    showBunosPage() {
      this.setBonusShow = true;
      this.getCurrentHeight();
    },
    ///////确认信息////////////
    cofigInfo() {
      this.sureShow = true;
      this.subBonus.miningAddress = this.subBonus.miningAddress;
      this.subBonus.beginBlockHeight = parseFloat(this.subBonus.beginBlockHeight);
      this.subBonus.endBlockHeight = parseFloat(this.subBonus.endBlockHeight);
      this.subBonus.maxSubsidyAmount = parseFloat(this.subBonus.maxSubsidyAmount);
      this.subBonus.remark = this.subBonus.remark;
    },
    sureBonus() {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      let param = {};
      param.beginBlockHeight = parseFloat(this.subBonus.beginBlockHeight);
      param.endBlockHeight = parseFloat(this.subBonus.endBlockHeight);
      param.maxSubsidyAmount = parseFloat(this.subBonus.maxSubsidyAmount);
      param.remark = this.subBonus.remark;
      let type = null;
      if (this.operateType === "按钱包") {
        type = "01";
        param.miningAddress = this.subBonus.miningAddress;
      } else if (this.operateType === "按项目") {
        type = "02";
        param.projectId = this.subBonus.projectId;
      } else {
        type = "99"
      }
      param.operateType = type;
      let url = apis.setBonusApi;
      this.$axios({
        method: "post",
        url: url,
        data: param,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        }
      })
        .then(res => {
          if (res.status == "200") {
            this.getTableList(0, 99);
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          console.log(err)
          this.$Message.error(err.response.data.message);
        });
    },
    getCurrentHeight() {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      let url = apis.currentHeightApi;
      this.$axios({
        method: "get",
        url: url,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        }
      })
        .then(res => {
          if (res.status == "200") {
            this.currentHeight = res.data;
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    getWalletNum(projectId, projectType) {
      let token = this.$localStorage.storageGet("TOKEN");
      if (!token) {
        this.$router.push({
          name: "Login"
        });
        return;
      }
      let url = apis.bonusWalletNumApi + "?projectId=" + projectId + "&projectType=" + projectType;
      this.$axios({
        method: "post",
        url: url,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + token
        }
      })
        .then(res => {
          if (res.status == "200") {
            if (res.data) {
              this.walletNum = res.data.length;
            }

          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    },
    showWalletNum(val) {
      let a = val;
      console.log(val)
      if (a) {
        let index = a.indexOf("/");
        let lastIndex = a.lastIndexOf("/")
        let str = a.slice(0, index)
        let str_1 = a.slice(index + 1, lastIndex);
        let str_2 = a.slice(lastIndex + 1);
        this.projectType = str_2;
        this.projectName = str_1;
        this.subBonus.projectId = str;
      }
      this.getWalletNum(this.subBonus.projectId, this.projectType)
    }
  },
  created() {

  },


  mounted() {
    this.getTotalData();
    this.getTableList(0, 99);
    this.option("SUBSIDY_STATUS")
  }
};
</script>

<style scoped>
.wrapp {
  padding: 0 20px;
}

.head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10px 5px;
  display: flex;
  justify-content: space-between;
}

.head span {
  font-size: 16px;
}

.banner {
  margin-top: 20px;
}

.title {
  color: #666;
  font-size: 24px;
  margin-right: 20px;
  display: inline;
}
.banner {
  margin-top: 20px;
}

.table {
  margin-top: 20px;
}

.relateUserView {
  height: 80%;
}

.relateButton {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.relateUser {
  position: fixed;
  padding: 20px;
  top: 10%;
  right: 10%;
  left: 10%;
  bottom: 10%;
  overflow: scroll;
  outline: 0;
  -webkit-overflow-scrolling: touch;
  background-color: lightgrey;
  filter: alpha(opacity=100);
  background-color: lightgrey;
  z-index: 999;
}

.relateUserTitle {
  font-size: 20px;
  margin-bottom: 20px;
}

.relateDevice {
  position: fixed;
  padding: 20px;
  top: 10%;
  right: 10%;
  left: 10%;
  bottom: 10%;
  overflow: hidden;
  outline: 0;
  -webkit-overflow-scrolling: touch;
  background-color: lightgrey;
  filter: alpha(opacity=100);
  background-color: lightgrey;
  z-index: 999;
}

.relateDeviceTitle {
  font-size: 20px;
  margin-bottom: 20px;
}
.totol {
  margin-top: 20px;
  font-size: 20px;
}
.type {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 10px;
}
.setBonusContent {
  margin-top: 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 10px;
}
</style>